<template>
	<view class="back">	
		<image class="bgImage" src="../../static/background.png"></image>
	
		<view class="findPassword" @click="gotoRegisterPage">找回密码</view>
		<view class="title">
			<text class="title-head">AI Support</text>
			<view></view>
			<text class="title-body">基于2d虚拟人智慧养老服务平台</text>
		</view>
		<view class="inputPlace">
			<input class="inputItem" v-model="username" type="text" name="Message" placeholder="请输入账号/手机号"  placeholder-class="holder-color"/>
			<input class="inputItem" v-model="password" @input="WhenInputIP" type="password" name="Message" placeholder="请输入密码"  placeholder-class="holder-color"/>
		</view>
		
		<SpButton name="登录" @btnClick="LoginRequest"></SpButton>
		<view class="dontHaveAccount">还没有账号？<view class="register" @click="gotoRegisterPage">注册</view></view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	
	export default {
		data() {
			return {
				username: '',//输入的用户名
				password: '',//输入的密码内容
			}
		},
		onLoad() {
			this.getInfomation();
		},
		methods: {
			//导入其他脚本的方法
			...mapMutations('m_user',['StoreToken']),
			//填写密码时触发的函数
			WhenInputIP(e) {
				const o = e.target;
				const inputRule = /[^\d^a-zA-Z!@#$%^&*_]/g  //修改inputRule 的值
				this.$nextTick(function() {
					this.password = o.value.replace(inputRule , '');
				})
			},
			//传送至注册页面
			gotoRegisterPage(){
				uni.navigateTo({
					url: '/subpkg/register/register'
				})
			},
			//用于获取登录所需的token信息
			async getInfomation(){
				const {data:res} = await uni.$http.get('/');
				if(res.code !== "200")
					uni.$showMsg("啊哦，连接不上服务器");
				else{
					console.log(res);
					this.StoreToken(res.token);
				}
					
			},
			//管他三七二十一，直接登录吧！
			async LoginRequest(){
				var msg_box = {
					username:this.username,
					password:this.password
				};
				const {data:res} = await uni.$http.post('/login/',msg_box);
				if(res.code !== "200")
					uni.$showMsg("连接服务器失败！");
				else
				{
					console.log(res);
				} 
			}
		}
	}
</script>

<style lang="scss">
.back{
	padding-bottom: 100rpx;
	align-items: center;
	
	.bgImage{
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
	}
	
	.findPassword{
		padding-left: 550rpx;
		padding-top: 60rpx;
		font-size: 12px;
		text-decoration: underline;
		color: rgba(42, 130, 228, 1);
	}
	
	.title{
		padding-left: 0rpx;
		padding-top: 140rpx;
		margin-bottom: 100rpx;
		align-items: center;
		justify-content: center;
		/** 文本1 */
		font-weight: 400;
		letter-spacing: -1px;
		line-height: 36px;
		
		color: rgba(34, 38, 37, 1);
		text-align: center;
		vertical-align: top;
		
		.title-head {
			font-size: 40px;
		}
		
		.title-body {
			font-size: 14px;
			color : rgba(139, 139, 167, 1);
		}
	}
	
	.inputPlace {
		margin-bottom: 100rpx;
		
		.inputItem {
			border-radius: 25rpx;
			border: 2px solid #eeeeee;
			width: 600rpx;
			height: 100rpx;
			margin-top: 50rpx;
			margin-left: 75rpx;
			background-color: white;
			text-align: center;
			text-decoration-color: black;
			color: rgba(34, 38, 37, 0.78);
			
		}
	}
	
	.dontHaveAccount {
		margin-left: 260rpx;
		margin-top: 370rpx;
		font-size: 12px;
		display: flex;
		
		.register {
			text-decoration: underline;
			color: rgba(42, 130, 228, 1);
		}
	}
	
}
	
.holder-color {
	color: rgba(34, 38, 37, 0.78);
}
</style>
